// TODO:  采购报表审核
import React, { VFC, useState, useEffect } from "react"
import {Modal, Form, Input, Button, message, Space, Table  } from 'antd';
import { useHistory, useParams } from "react-router-dom";;

import { TeamDetectEquipmentedit, getSelectDetectEquipmentList, setTeamComment, getTeamComment  } from '@services/index';
import NoInfo from '@components/noInfo';

import styled from "styled-components";

const FormItem = Form.Item;
const { TextArea } = Input;

const PurchaseReport:VFC<any> = props => {
    const {teamId, isVisible, onCancel} = props;
    const {location} = useHistory() as any
    const equipList = ['轨道器','巡视器','着陆器'];
    const [equipType, setEquipType] = useState<number>(0);
    const [dataList, setDataList] = useState<any[]>([]);
    const [isShow, setIsShow] = useState<boolean>(false);
    const [loading, setLoading] = useState<boolean>(false)
    const [comment, setComment] = useState<any>(undefined)
    const params:any = {
        phaseId: location.state?.phaseId,
        teamId,
        projectId: JSON.parse(sessionStorage.userInfo).projectId
    }
    useEffect(()=>{
        init()
    }, [])
    const init = () => {
        setLoading(true)
        getSelectDetectEquipmentList(params).then(({status, data}) => {
            if(status === '0'){
                const type1 = computedData(data.type1)
                const type2 = computedData(data.type2)
                const type3 = computedData(data.type3)
                const result:any = {
                    type1:[...data.type1, type1],
                    type2:[...data.type2, type2],
                    type3:[...data.type3, type3],
                }
                setDataList({...result});
            }
        }).finally(()=>setLoading(false))
        // 回显
        getTeamComment(params).then(({status, data})=>{
            if(status === '0'){
                const {list} = data
                let _isShow = list.length>0;
                setIsShow(_isShow);
                setComment(list?.length&&list[0].comment)
            }
        })
    }
    const computedData = (list:any[]) => {
        let power =  0, price = 0, weight = 0
        list.forEach(item => {
            price += item.price;
            power += item.power;
            weight += item.weight;
        })
        return {
            name:'总计',
            power,
            price,
            weight
        };
    }
    // 提交表单数据
    const submit = async (type: string) => {
        if(!comment){
            message.error('请输入评语');
            return
        }
        // 0 未评论 1 通过 2 未通过
        params.comment = comment
        params.pass = type=='Y' ? 1: 2
        const { status } = await setTeamComment(params)
        if(status == '0'){
            message.success('提交成功');
            onCancel()
        }
    };
    const columns = [
        { title: equipList[equipType], dataIndex: 'name'},
        { title: '价格/万', dataIndex: 'price', render: (text:number)=> text  / 10000},
        { title: '功耗/瓦', dataIndex: 'power'},
        { title: '重量/kg', dataIndex: 'weight' },
        { title: '购买', dataIndex: 'required', render: (text:number)=> text==1?'是':'否'},
    ];
    return (
        <Modal title={'采购报表'} width={1290} visible={isVisible} onCancel={onCancel} footer={false}>
            {isShow
            ?
            <>
                <XTabs className="dflex">
                    {equipList.map((item,index) => (
                        <div key={index} onClick={()=>setEquipType(index)} className={equipType==index?'selected':''}>{item}</div>
                    ))}
                </XTabs>
                <Table columns={columns} loading={loading} dataSource={dataList[`type${equipType+1}`]} bordered pagination={false} />
                <Form style={{marginTop:20}}>
                    <FormItem label="评语">
                        <TextArea  value={comment} onChange={e => setComment(e.target.value)} placeholder="请输入评语"/>
                    </FormItem>
                </Form>
                <Space size={20} style={{display: 'flex',justifyContent: 'center'}}>
                    <Button type="primary" onClick={()=>submit('Y')}>通过</Button>
                    <Button onClick={()=>submit('N')}>不通过</Button>
                </Space>
            </>
            :
            <NoInfo />
            }
        </Modal>
    )
}
export default PurchaseReport
const XTabs = styled.div`
    margin-bottom: 1px;
    & div{
        margin: 0 50px 20px 0;
        color: #1A1816;
        font-weight: bold;
        cursor: pointer;
        background-size: 100% 100%;
        font-size: 16px;
    }
    & .selected {
        color: #1890ff;
        background-size: 100% 100%;
        color: #1890ff;
        background-size: 100% 100%;
        border-bottom: 2px solid;
    }
`